<template>
	<view>
		<!-- 搜索组件 -->
		<view class="search">
			<view class="icon-cl">
				<image class="icon" src="/static/myorder/search.png" />
			</view>
			<input class="text" v-model="query" @input="input" @confirm="search" placeholder="输入关键字搜索" />
		</view>
		<uni-section title="奖品" type="line">
			<uni-card v-if="!isSearch" v-for="(item, index) in myAwardList.list" :key="index" size="large"
				:title="item.goodName" :sub-title="'价格:'+item.goodPrice" extra="更多信息" :thumbnail="item.goodImage"
				mode="basic" @click="showAwardDetail(item)" style="height: 200rpx; width:100%;">
			</uni-card>
			<uni-card v-if="isSearch" v-for="(item, index) in filterList.list" :key="index" size="large"
				:title="item.goodName" :sub-title="'价格:'+item.goodPrice" extra="更多信息" :thumbnail="item.goodImage"
				mode="basic" @click="showAwardDetail(item)" style="height: 200rpx; width:100%;">
			</uni-card>
		</uni-section>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup">
				<view class="popup-content">
					<uni-card :title="currentDetail.goods.goodName" :sub-title="currentDetail.goods.goodPrice"
						:thumbnail="currentDetail.goods.goodImage">
						<view class="uni-body">
							<text style="float: left; ">奖品来源活动</text>
							<text style="float: right; ">{{currentDetail.activity_name}}</text>
						</view>
						<view class="uni-body">
							<text style="float: left; ">抽奖时间</text>
							<text style="float: right; ">{{currentDetail.orderDate}}</text>
						</view>
						<view class="uni-body">
							<text style="float: left; ">发货状态</text>
							<text style="float: right; ">{{orderStatus[currentDetail.shipStatus]}}</text>
						</view>

					</uni-card>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userdata: {
					openId: '',
					token: '',
				},
				myAwardList: {
					current: 1,
					size: 10,
					total: 0,
					list: [],
				},
				filterList: {
					current: 1,
					size: 10,
					total: 0,
					list: [],
				},
				currentDetail: {},
				isSearch: false,
				query: '',
				orderStatus:["未发货", "已发货", "已收货"]
			}
		},
		methods: {
			input(e) {},
			showAwardDetail(e) {
				this.currentDetail = e
				this.$myRequest({
					url:'/user/getAwardMessage',
					method:'GET',
					header:{
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						// goodId:e.goodId,
						// openId:this.userdata.openId,
						orderId:e.orderId
					}
				}).then(res=>{
					console.log(res,'message');
					this.currentDetail=res.data.data
					console.log(this.currentDetail,'当前信息');
				})

				this.$refs.popup.open()
			},

			async search(res) {
				// 获取用户输入的查询字符串
				this.query = res.detail.value
				const query = this.query.trim().toLowerCase();
				if (!query) {
					this.isSearch = false
					console.log("return");
					return;
				}
				await this.$myRequest({
					url: '/user/getAwardList',
					method: 'GET',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						openId: this.userdata.openId,
						name: query
					}

				}).then(res => {
					// console.log(res,'----res');
					const newData = res.data;
					const oldData = [];
					const newDataStr = newData.map(item => JSON.stringify(item));
					const oldDataStr = oldData.map(item => JSON.stringify(item));
					const mergedDataStr = [...oldDataStr, ...newDataStr];
					const uniqueDataStr = Array.from(new Set(mergedDataStr));
					const uniqueData = uniqueDataStr.map(item => JSON.parse(item));
					this.filterList.list = uniqueData;
					this.isSearch = true
				}).catch(err => {
					console.log(err);
				})
			},
			getAwardList() {
				this.$myRequest({
					url: '/user/getAwardList',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						openId: this.userdata.openId,
						name: ""
					},
				}).then(res => {
					const newData = res.data;
					const oldData = this.myAwardList.list;
					const newDataStr = newData.map(item => JSON.stringify(item));
					const oldDataStr = oldData.map(item => JSON.stringify(item));
					const mergedDataStr = [...oldDataStr, ...newDataStr];
					const uniqueDataStr = Array.from(new Set(mergedDataStr));
					const uniqueData = uniqueDataStr.map(item => JSON.parse(item));
					this.myAwardList.list = uniqueData;
					console.log(this.myAwardList.list, 'myAwardList');
				}).catch(err => {
					console.log(err);
				})
			},
			async getStorage() {
				const openId = uni.getStorageSync('openId')
				const token = uni.getStorageSync('token')
				this.userdata.openId = openId
				this.userdata.token = token
			},
		},
		onLoad() {
			this.getStorage()
			this.getAwardList();
		},
	}
</script>

<style>
	/* 搜索框样式 */
	.search {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-left: 3%;
		width: 94%;
		height: 60rpx;
		background-color: whitesmoke;
		margin-top: 5%;
		border: 1rpx solid whitesmoke;
		border-radius: 20rpx;
	}

	/* 搜索框提示文字样式 */
	.search input {
		font-size: 27rpx;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		padding-left: 30rpx;
	}

	/* 搜索框小图标 */
	.search image {
		width: 40rpx;
		height: 40rpx;
		padding-right: 20rpx;
	}

	/deep/.uni-popup .uni-popup__wrapper {
		width: 80% !important;
	}

	.popup-content .uni-body{
		  width: 100%;
		  overflow: hidden;
		  border-bottom:1px solid #ccc;
		  margin-bottom: 15rpx;
	}
	
	@import './orderList.css';
</style>